(function() {
	var datepicker = window.datepicker;
	var monthData;
	var $wrapper;
	//dom模板
	datepicker.buildUi = function(year, month) {
		monthData = datepicker.getMonthData(year, month);
		var html = '<div class="ui-datepicker-header">'+
				'<a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>'+
				'<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>'+
				'<span class="ui-datepicker-curr-month">'+monthData.year+'-'+monthData.month+'</span>'+
			'</div>'+
			'<div class="ui-datepicker-body">'+
				'<table>'+
					'<thead>'+
						'<tr>'+
							'<th>日</th>'+
							'<th>一</th>'+
							'<th>二</th>'+
							'<th>三</th>'+
							'<th>四</th>'+
							'<th>五</th>'+
							'<th>六</th>'+
						'</tr>'+
					'</thead>'+
					'<tbody>';
					
					for (var i=0; i<monthData.days.length; i++) {
						var date = monthData.days[i];
						if (i%7 === 0) {//周日
							html += '<tr>';
						}
						html += '<td data-date='+date.showDate+'>' +
									'<span class="ui-datepicker-day">' + date.showDate + '</span>'+
									'<span class="ui-datepicker-special">' + "节日" + '</span>'+
									'<span class="ui-datepicker-price">' + "¥"+11 + '</span>'+	
								'</td>';
						if (i%7 === 6) {//周六
							html += '</tr>';
						}
					}
					html += '</tbody>'+
				'</table>'+
		    '</div>';
		return html;
	};
	//渲染dom结构
	datepicker.render = function(direction) {
		var year, month;
		if (monthData) {
			year = monthData.year;
			month = monthData.month;
		}
		if (direction === 'prev') month--;
		if (direction === 'next') month++;
		var html = datepicker.buildUi(year, month);
		$wrapper = document.querySelector('.ui-datepicker-wrapper');
		if (!$wrapper) {			
			$wrapper = document.createElement('div');
			$wrapper.className = 'ui-datepicker-wrapper';
			document.body.appendChild($wrapper);
		}
		$wrapper.innerHTML = html;
	}
	//初始化
	datepicker.init = function(input) {
		datepicker.render();		
		var $input = document.querySelector(input);
		var isOpen = false;
		$input.addEventListener('click', function() {
			if (isOpen) {//切换datepicker显隐
				$wrapper.classList.remove('ui-datepicker-wrapper-show');
				isOpen = false;
			} else {
				$wrapper.classList.add('ui-datepicker-wrapper-show');
				/*调整datepicker的位置*/
				var left = $input.offsetLeft;
				var top = $input.offsetTop;
				var height = $input.offsetHeight;
				$wrapper.style.top = top + height + 2 + 'px';
				$wrapper.style.left = left + 'px';
				isOpen = true;
			}
		}, false);
		
		$wrapper.addEventListener('click', function(e) {
			var $target = e.target;
			if ($target.classList.contains('ui-datepicker-prev-btn')) {
				datepicker.render('prev');
			} else if ($target.classList.contains('ui-datepicker-next-btn')){
				datepicker.render('next');
			} else if ($target.tagName.toLowerCase() == 'td') {
				var date = new Date(monthData.year, monthData.month - 1, $target.dataset.date);
				$input.value = format(date);
				$wrapper.classList.remove('ui-datepicker-wrapper-show');
				isOpen = false;				
			}
		}, false);
		/*$wrapper.addEventListener('click', function(e) {
			var $target = e.target;
			if ($target.tagName.toLowerCase() !== 'td') return;
			var date = new Date(monthData.year, monthData.month - 1, $target.dataset.date);
			$input.value = format(date);
			$wrapper.classList.remove('ui-datepicker-wrapper-show');
			isOpen = false;
		}, false);*/
	}
	function format(date) {
		console.log(date)
		ret = '';
		var padding = function(num) {//位数补齐
			if (num <= 9) {
				return '0' + num;
			}
			return num;
		}
		ret += date.getFullYear() + '/';//年
		ret += padding(date.getMonth() + 1) + '/';//月
		ret += padding(date.getDate());//日
		return ret;
	}
})();
